<template>
  <div class="app-container">
    <!-- {{ searchInfo }} -->
    <Form
      v-if="showSearch"
      v-model:formData="searchInfo"
      :formItems="formItems"
    >
      <template #footer>
        <div style="text-align: left">
          <el-button size="small" icon="Search" type="primary" @click="goSearch"
            >搜素</el-button
          >
          <el-button size="small" icon="Refresh" @click="resetSearch"
            >重置</el-button
          >
        </div>
      </template>
    </Form>
    <h3></h3>
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"> </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="resetSearch"
      ></right-toolbar>
    </el-row> -->
    <h3></h3>
    <x-table v-loading="loading" :propList="propList" :tableData="info.items">
      <template #imgs="{ row }">
        <el-image
          :src="img"
          v-for="img in row.img_arr"
          :key="img"
          alt=""
          style="width: 100px; height: 100px"
        />
      </template>
      <template #status="{ row }">
        <el-tag v-if="row.status == 1">待处理</el-tag>
        <el-tag type="success" v-if="row.status == 2">已处理</el-tag>
      </template>
      <template #op="{ row }">
        <el-button
          v-hasPermi="['member:suggest:reply']"
          type="primary"
          link
          icon="Position"
          @click="lookImg(row)"
          >回复消息</el-button
        >
        <!-- <el-button type="primary"
link icon="Position" @click="reply(row)"
          >回复</el-button
        > -->
        <el-button
          v-hasPermi="['member:suggest:changeStatus']"
          type="primary"
          link
          icon="Edit"
          @click="handelSuccess(row)"
          >处理完成</el-button
        >
      </template>
    </x-table>
    <pagination
      v-show="info.total > 0"
      :total="info.total"
      v-model:page="searchInfo.pageNum"
      v-model:limit="searchInfo.pageSize"
      @pagination="getInfo"
    />
    <Dialog
      width="30%"
      title="详情"
      v-model:isShowDialog="isShowDialog"
      center
      @confirm="confirmReply"
      confirmText="确定回复"
    >
      <div style="text-align: center">
        <p style="font-weight: bold; color: #333; font-size: 17px">
          投诉内容：<span>{{ curItem.content }}</span>
        </p>
        <div>
          <p style="color: #f00">{{ curItem.img_arr.length }}张图片</p>
          <el-image
            style="width: 150px; height: 150px"
            :src="item"
            v-for="item in curItem.img_arr"
            :key="item"
            :preview-src-list="imgs"
          ></el-image>
        </div>
        <p style="color: #f00">超过48小时未回复无法发送消息</p>
        <p style="display: flex; justify-content: center">
          <span style="width: 60px">回复:</span>
          <el-input
            :rows="4"
            type="textarea"
            placeholder="请输入回复内容"
            v-model="replyInfo.msg"
          ></el-input>
        </p>
      </div>
    </Dialog>
    <!-- <Dialog
      width="30%"
      title="投诉回复"
      v-model:isShowDialog="isShowDialog2"
      center
    >
      <div style="text-align: center">
        <p style="font-weight: bold; color: #333; font-size: 17px">
          投诉内容：<span>{{ curItem.content }}</span>
        </p>
        <p style="display: flex; justify-content: center">
          <span style="width: 60px">回复:</span>
          <el-input
            :rows="4"
            type="textarea"
            placeholder="请输入回复内容"
            v-model="replyInfo.msg"
          ></el-input>
        </p>
      </div>
    </Dialog> -->
  </div>
</template>

<script>
import { propList, formItems } from "./config";
import { getList, changeStatus, reply } from "@/api/mpManage/mpSuggest";
export default {
  name: "mpmpSuggestindex",
  data() {
    return {
      replyInfo: {
        msg: "",
      },
      isShowDialog2: false,
      curItem: {},
      showSearch: true,
      isShowDialog: false,
      propList,
      formItems,
      loading: false,
      info: {},
      searchInfo: {
        pageNum: 1,
        pageSize: 10,
        created_at: this.getTimeFilterDefault2(30, true),
      },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      this.loading = true;
      const params = { ...this.searchInfo };
      const { data } = await getList(params);
      this.info = data;
      this.loading = false;
    },
    reply(item) {
      this.curItem = item;
      this.isShowDialog2 = true;
      this.replyInfo.msg = "";
    },
    confirmReply() {
      // this.$message.success("huifu");
      if (!this.replyInfo.msg) {
        this.$message.error("请输入回复内容");
        return false;
      }
      const params = {
        id: this.curItem.id,
        msg: this.replyInfo.msg,
        mp_user_id: this.curItem.mp_user_id,
      };
      reply(params)
        .then((res) => {
          console.log(res);
          this.replyInfo.msg = "";
          this.isShowDialog = false;
          this.getInfo();
          this.$message.success("发送成功");
        })
        .catch((err) => {
          // this.$message.error("发送失败");
          console.log(err);
        });
    },
    lookImg(item) {
      this.curItem = item;
      this.imgs = item.img_arr;
      this.isShowDialog = true;
    },
    handelSuccess(item) {
      this.$modal
        .confirm("是否标记昵称为【" + item.user.nickname + "】的投诉为已完成？")
        .then(function () {
          // return delChannelGroup(dictIds);
          const params = {
            id: item.id,
            status: 2,
          };
          return changeStatus(params);
        })
        .then(() => {
          this.getInfo();
          this.$modal.msgSuccess("操作成功");
        })
        .catch(() => {});
    },
    resetSearch() {
      this.searchInfo = this.$options.data.call(this).searchInfo;
      this.searchInfo.created_at = this.getTimeFilterDefault2(30, true);
      this.getInfo();
    },
    goSearch() {
      // 重置时间
      this.getInfo();
    },
  },
};
</script>

<style lang="scss" scoped></style>
